<template>
    <div class="map">
        <el-header>
            <label>起点：</label>
            <el-input v-model="start" style="width: 200px;"></el-input>
            <label>终点：</label>
            <el-input v-model="end" style="width: 200px"></el-input>
            <el-button @click="path" style="margin-left: 30px;" type="success">导航</el-button>
        </el-header>
        <div id="map"></div>
    </div>
</template>

<script>
    import PubSub from 'pubsub-js'
    export default {
        name: "mapTest",
        data() {
            return {
                start: "",//起点
                end: "",
                map: "",//地图实例
            }
        },
        methods: {
            path() {
                this.map.enableScrollWheelZoom();
                var p1 = new BMap.Point(116.301934, 39.977552);
                var p2 = new BMap.Point(116.508328, 39.919141);
                this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
                var driving = new BMap.DrivingRoute(this.map, {renderOptions: {map: this.map, autoViewport: true}});
                driving.search(p1, p2);
            }
        },

        mounted() {
            // 百度地图API功能
            this.map = new BMap.Map("map"); // 创建Map实例
            this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
            this.map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
            this.map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

            //消息订阅，相当于前面的绑定事件监听
            PubSub.subscribe('dataCome', (msg, data) => {
                console.log("*****************PubSub.subscribe**********************");
                console.log(msg);
                console.log(data);
            })
        }
    }
</script>

<style scoped>
    #map {
        height: 600px;
    }
</style>